<template>
	<page-meta :page-style="lock ? 'overflow: hidden' : 'overflow: auto'" />
	<page :nav="false" ref="pageRef">
		<view class="detailWrapper" :style="{ backgroundImage: 'url(' + ossurl.box.detail.awardBg + ')' }">
			<view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }">
				<view class="flex-align-center relative" style="height: 80rpx">
					<text class="cuIcon-back back" @click.stop="back"></text>
					<view v-if="data" class="title line-ellipsis">
						{{ data && data.name }}
					</view>
				</view>
			</view>
			<view :style="{ height: 72 + statusBarHeight * 2 + 'rpx' }"></view>

			<top v-if="data" :data="data" :horse="horse" @onShowRecord="showRecord" @onShowUpdate="showUpdate"
				:type="1" />
			<view class="SwiperBox productSwiper">
				<view class="imageBox">
					<image class="image" :src="data.pic" mode="aspectFit" />
				</view>
				<view class="level" :style="{ backgroundImage: 'url(' + ossurl.box.detail.levelBg + ')' }"
					@click="showDetail()">
					查看商品详情
				</view>
			</view>

		</view>
		<view class="shipping" :style="{ backgroundImage: 'url(' + ossurl.box.ruleBg + ')' }">
			{{rules}}
		</view>
		<product-a v-if="products" :products="products" :levelist="data.luckGoodsLevelProbabilityList"
			:poolId="poolId" />
		<explain v-if="products" :poolId="poolId" />
		<view class="fill-height"></view>
		<view class="bottom paddingX10" v-if="data">
			<view class="bottom-btns flex-align-around">
				<view class="relative btnItem" @click="pay(1)"
					:style="{ backgroundImage: 'url(' + ossurl.box.detail.yfBtn + ')' }">
					<view>
						购买一盒
						<view v-if="$valid.isNumber2(data.specialPrice)" class="text">
							(¥{{ data.specialPrice }})
						</view>
						<view v-else class="text">(¥{{ data.price }})</view>
					</view>
				</view>
				<view class="relative btnItem" @click="pay(5)"
					:style="{ backgroundImage: 'url(' + ossurl.box.detail.wlBtn + ')' }">
					<view>
						购买五盒
						<view v-if="data.specialPriceFive" class="text">
							(¥{{ data.specialPriceFive }})
						</view>
						<view v-else class="text">(¥{{ data.price * 5 }})</view>
					</view>
				</view>
				<view class="relative btnItem" @click="showFreedom"
					:style="{ backgroundImage: 'url(' + ossurl.box.detail.csBtn + ')' }">
					购买多盒
				</view>
			</view>
		</view>
		<image class="ck" :src="ossurl.box.detail.warehouse" webp @click="showCK" />
		<image class="mj" :src="ossurl.box.detail.stone" webp @click="$router.push('magic')" v-if="user && rockShow" />
		<image class="record" :src="ossurl.box.detail.record" webp @click="showRecord" />
		<image class="rule" :src="ossurl.box.detail.rule" webp @click="showRule" />
		<image v-if="data && data.demoFlag === 1" class="sw" :src="ossurl.box.detail.demoBtn" webp @click="tryDemo" />
		<record ref="recordRef" @close="onClose" :poolId="poolId" />
		<checkout ref="checkoutRef" v-if="data" :data="data" @close="onClose" :poolId="poolId" @success="onSuccess" />
		<pay-freedom ref="freeRef" v-if="data" :data="data" @close="onClose" :poolId="poolId" @pay="pay" />
		<image v-if="topVisible" :src="ossurl.common.topBtn" webp class="fixed"
			style="right: 30rpx; bottom: 300rpx; width: 68rpx; height: 98rpx" @click="$common.scrollTop()" />
		<ruleDialog ref="ruleDialog"></ruleDialog>
		<detail ref="detailRef" v-if="products" :products="products" :poolId="poolId"></detail>
	</page>
</template>
<script>
	import top from './top';
	import levelRatio from './level_ratio';
	import productA from './product_a';
	import productB from './product_b';
	import explain from './explain';
	import record from './record';
	import official from './official';
	import checkout from './checkout';
	import updateRecord from './update_record';
	import loginMixin from '@/mixin/login';
	import prince from './prince';
	import payFreedom from './pay_freedom';
	import detail from './detail.vue';
	import {
		throttle
	} from '@/utils';
	import ossurl from '@/utils/ossurl';
	import {
		LEVEL_MAP
	} from '@/utils/config';
	import ruleDialog from './ruleDialog';
	export default {
		mixins: [loginMixin],
		components: {
			ruleDialog,
			top,
			levelRatio,
			productA,
			productB,
			explain,
			record,
			official,
			checkout,
			updateRecord,
			prince,
			payFreedom,
			detail,
		},
		data() {
			return {
				current: 0,
				ossurl,
				poolId: null,
				data: null,
				products: null,
				horse: null,
				show: false,
				lock: false,
				topVisible: false,
				smartPayFlag: true,
				scrollTop: 0,
				rules:''
			};
		},
		computed: {
			statusBarHeight() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo.statusBarHeight;
				}
				return 20;
			},
			headerBg() {
				return this.scrollTop > 0 ? '#fff' : 'transparent';
			},
			user() {
				return this.$store.state.userInfo;
			},
			rockShow() {
				let val = false;
				val = uni.getStorageSync('rockShow');
				return val;
			},
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			this.topVisible = e.scrollTop > 800;
		},
		onLoad(options) {
			console.log(options);
			this.poolId = options.poolId;
			this.poolIn();
			this.getParamConfig()
			// if(this.$store.state.hide){
			//   this.showRule()
			// }
		},
		onShow() {},
		mounted() {

			setTimeout(() => {
				this.init(true);
			}, 100);
		},
		onUnload() {
			this.poolOut();
		},
		onShareAppMessage(res) {
			return {
				title: this.data.name,
				path: '/pages/award/index',
				imageUrl: this.data.cover,
			};
		},
		onShareTimeline() {
			return {
				title: '超级玛特 次元聚集地，潮玩新势力',
				query: 'poolId=' + this.poolId,
				imageUrl: this.data.cover,
			};
		},
		methods: {
			async getParamConfig() {
				const res = await this.$service.user.getParamConfig('show_rule');
				this.rules = res.data
			},
			showSwipe(index) {
				this.$router.push('award_detail_swipe', {
					poolId: this.poolId,
					index,
				});
			},
			getLevel(level) {
				let item = LEVEL_MAP[level];
				if (item) {
					return item.title;
				} else {
					return '';
				}
			},
			poolIn() {
				if (this.$common.isLogin()) {
					this.$service.award.poolIn(this.poolId);
				}
			},

			poolOut() {
				if (this.$common.isLogin()) {
					this.$service.award.poolOut(this.poolId);
				}
			},
			async init(loading = false) {
				this.getData(loading);
				this.getHorse();
			},
			async getData(loading = false) {
				const res = await this.$service.award.detail(this.poolId, loading);
				this.data = res;
				res && (this.products = res.luckGoodsList);
				this.$refs.princeRef && this.$refs.princeRef.refresh();
			},
			async getHorse() {
				const res = await this.$service.award.detailHorse(this.poolId);
				this.horse = res;
			},
			showDetail() {
				this.$refs.detailRef.show();
			},
			showRecord() {
				this.$refs.recordRef.show();
				this.lock = true;
			},
			onClose() {
				this.lock = false;
			},
			showUpdate() {
				// this.$refs.updateRef.show()
			},
			async pay(num) {
				throttle.call(() => {
					this.previewPay(num);
				});
			},
			async previewPay(num) {
				if (!this.$common.isLogin()) {
					this.$router.push('login');
					return;
				}
				const res = await this.$service.award.preview(this.poolId, num);
				if (res) {
					this.$refs.checkoutRef.show(num, res);
					this.lock = true;
				}
			},
			showFreedom() {
				if (!this.$common.isLogin()) {
					this.$router.push('login');
					return;
				}
				this.$refs.freeRef.show();
				this.lock = true;
			},
			back() {
				this.$router.back();
			},
			onSuccess(param) {
				const closeAnimal = this.$store.getters.closeAnimal;
				if (param.num >= 10 || closeAnimal) {
					this.$router.push('lottery_more', param);
				} else {
					this.$cache.set(this.$cache.key.AWARD_GOODS, this.products);
					this.$router.push('lottery', param);
				}
				setTimeout(() => {
					this.init(false);
				}, 500);
				if (this.$store.state.hide == 1) {
					this.$service.user.getHide();
					this.pageConfig('magic_luck');
				}
			},
			async pageConfig(key) {
				const res = await this.$service.base.pageConfig(key);
				let pageConfig = this.$store.state.pageConfig || {};
				pageConfig[key] = res;
				this.$store.commit(SET_PAGE_CONFIG, {
					...pageConfig,
				});
			},
			async tryDemo() {
				const res = await this.$service.award.tryDemo(this.poolId, 1);
				if (res) {
					this.$cache.set(this.$cache.key.AWARD_GOODS, this.products);
					this.$cache.set(this.$cache.key.AWARD_DEMO, res);
					this.$router.push('lottery', {
						num: 1,
					});
					this.getData();
					this.$event.emit(this.$event.key.AWARD_REFRESH);
				}
			},
			showCK() {
				this.$router.push('store');
			},
			closeSmartTitle() {
				this.smartPayFlag = false;
			},

			showRule() {
				// this.$router.push('playing_method', { type: 1 })
				this.$refs.ruleDialog.visible = true;
			},
			handleChange(e) {
				this.current = e.detail.current;
			},
			handlePrev() {
				this.current -= 1;
			},
			handleNext() {
				this.current += 1;
			},
		},
	};
</script>
<style></style>
<style lang="scss" scoped>
	.award-detail {
		padding-bottom: calc(136rpx + env(safe-area-inset-bottom));
	}

	.detailWrapper {
		background-size: 100% auto;
		background-repeat: no-repeat;
		height: 1200rpx;

		.SwiperBox {
			position: relative;

			.prev,
			.next {
				position: absolute;
				top: 20%;
				z-index: 90;

				image {
					width: 138rpx;
					height: 138rpx;
				}
			}

			.prev {
				left: 0;
			}

			.next {
				right: 0;
			}
		}

		.productSwiper {
			height: 750rpx;

			.imageBox {
				text-align: center;
				height: 40.5vh;
				font-size: 0;
				line-height: 0;

				.image {
					width: 400rpx;
					height: 40.5vh;
					animation: animateImage 3s;
					animation-play-state: running;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
				}
			}

			.level {
				text-align: center;
				font-size: 24rpx;
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: 700;
				color: #ec2c30;
				background-size: 272rpx 62rpx;
				background-position: center;
				background-repeat: no-repeat;
				line-height: 62rpx;
			}

			@keyframes animateImage {

				from,
				to {
					transform: translate3d(0, 0, 0);
				}

				25% {
					transform: translate3d(0, 10px, 0);
				}

				50% {
					transform: translate3d(0, 0, 0);
				}

				75% {
					transform: translate3d(0, -10px, 0);
				}

				100% {
					transform: translate3d(0, 0, 0);
				}
			}
		}
	}

	.pagae-nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 100;
		align-items: center;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 72rpx;
			width: 500rpx;
		}

		.back {
			z-index: 1800;
			font-size: 32rpx;
			line-height: 32rpx;
			position: absolute;
			left: 20rpx;
			top: 24rpx;
		}
	}

	.bg {
		position: fixed;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.smart_pay {
		height: 50rpx;
		background: linear-gradient(90deg, #3800b3 0%, #655b82 100%);
		margin: 20rpx 28rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		color: #fff;
		line-height: 50rpx;

		.smart_rule {
			display: inline-block;
			width: 36rpx;
			height: 36rpx;
			line-height: 30rpx;
			margin: 0 0 0 10rpx;
			vertical-align: text-top;
		}

		.smart_X {
			position: absolute;
			right: 20rpx;
			top: 5rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.fill-height {
		height: 168rpx;
	}

	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fde9dd;
		height: 168rpx;
		padding-bottom: 40rpx;

		.bottom-btns {
			height: 128rpx;

			.btnItem {
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 700;
				color: #ffffff;
				background-size: 100% 100%;
				padding: 20rpx 12rpx;
				text-align: center;
				flex: 1;
				margin: 0 13rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					display: inline-block;
					font-size: 18rpx;
					line-height: 18rpx;
				}

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.image {
			height: 108rpx;
			width: 0;
		}
	}

	.sw,
	.mj,
	.ck {
		position: fixed;
		right: 0rpx;
		width: 72rpx;
		height: 112rpx;
	}

	.mj {
		bottom: 800rpx;
	}

	.sw {
		bottom: 540rpx;
		width: 128rpx;
		height: 128rpx;
	}

	.ck {
		bottom: 690rpx;
	}

	.record {
		position: fixed;
		left: 0rpx;
		width: 72rpx;
		height: 158rpx;
		bottom: 640rpx;
	}

	.rule {
		position: fixed;
		left: 0rpx;
		bottom: 800rpx;
		width: 72rpx;
		height: 112rpx;
	}

	.shipping {
		background-size: 100% 100%;
		width: 100%;
		height: 128rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 12px;
		color: #D04214;
		line-height: 35rpx;
		padding:0 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;
	}
</style>